<!DOCTYPE html>

<html lang="en">
	<head runat="server">
		<title>the detail form</title>
		<!-- <link rel="stylesheet" href="/css/styles.css" /> -->
		<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>

		<script type="text/javascript" src="../jQueryClient/postback.js"></script>

		<script type="text/javascript" src="../jQueryClient/object.js"></script>
		<script type="text/javascript" src="../jQueryClient/dataformat.js"></script>
		<script type="text/javascript" src="../jQueryClient/datejs.js"></script>

		<link rel="stylesheet" href="../css/overcast/jquery-ui-1.8.20.custom.css" />
		<script type="text/javascript" src="../js/jquery-ui-1.8.20.custom.min.js"></script>

		<link type="text/css" rel="stylesheet" href="../SyntaxHighlighter/css/SyntaxHighlighter.css">
		<script language="javascript" src="../SyntaxHighlighter/js/shCore.js"></script>
		<script language="javascript" src="../SyntaxHighlighter/js/shBrushJScript.js"></script>
		<script language="javascript" src="../SyntaxHighlighter/js/shBrushXml.js"></script>

		<script type="text/javascript" src="../js/jQueryRotate.js"></script>

		<link rel="stylesheet" href="../css/jquery.ibutton.css" />
		<script type="text/javascript" src="../js/jquery.ibutton.min.js"></script>

		<style type="text/css">
			#demo-source > div {
				margin-top: 15px;
			}

			#demo-source > div > div {
				margin-top: 10px;
			}

			#demo-source a {
				font-size: 15px;
				text-decoration: underline;
				cursor: pointer;
			}

			#demo-source a > img {
				margin-right: 3px;
			}
			a {
				color: #54A6DE;
			}
			body {
				color: #888;
			}
			.buttons {
				margin-top: 20px;
			}

			.buttons input {
				font-size: 12px;
				margin-right: 10px;
			}

			#ui-datepicker-div {
				font-size: 12px;
			}

			input[type='text'] {
				width: 350px;
				padding: 2px;
				font-size: 15px;
				text-shadow: 0px 1px 0px #fff;
				outline: none;
				/* IE10 */
				background-image: -ms-linear-gradient(top left, #BCBCBE 0%, #FFFFFF 100%);
				/* Mozilla Firefox */
				background-image: -moz-linear-gradient(top left, #BCBCBE 0%, #FFFFFF 100%);
				/* Opera */
				background-image: -o-linear-gradient(top left, #BCBCBE 0%, #FFFFFF 100%);
				/* Webkit (Safari/Chrome 10) */
				background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #BCBCBE), color-stop(1, #FFFFFF));
				/* Webkit (Chrome 11+) */
				background-image: -webkit-linear-gradient(top left, #BCBCBE 0%, #FFFFFF 100%);
				/* Proposed W3C Markup */
				background-image: linear-gradient(top left, #BCBCBE 0%, #FFFFFF 100%);
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				-webkit-box-shadow: 1px 1px 0px #efefef;
				-moz-box-shadow: 1px 1px 0px #efefef;
				box-shadow: 1px 1px 0px #efefef;
			}

			input:focus {
				-webkit-box-shadow: 0px 0px 5px #007eff;
				-moz-box-shadow: 0px 0px 5px #007eff;
				box-shadow: 0px 0px 5px #007eff;
			}

			#divDetail table {
				border: 3px solid #CCC;
				border-radius: 5px;
			}

			#divDetail td {
				padding: 7px;
			}
		</style>
	</head>
	<body>
		<div id="divDetail">
			<input type="hidden" value="" name="Id"/>
			<table>
				<tr>
					<td> Image Url: </td>
					<td>
					<input type="text" name="__metadata.media_src" />
					</td>
				</tr>

				<tr>
					<td> Name: </td>
					<td>
					<input type="text" name="Name" />
					</td>
				</tr>

				<tr>
					<td> Rating: </td>
					<td>
					<input type="text" name="AverageRating" />
					</td>
				</tr>
				<tr>
					<td> Dvd: </td>
					<td>
					<input type="checkbox" name="Dvd.Available" />
					</td>
				</tr>
				<tr>
					<td> Modified: </td>
					<td>
					<input type="text" id="birthday" name="DateModified" />
					</td>
				</tr>

			</table>
		</div>
		<div class="buttons">
			<input type="button" value="submit" onclick="submitchange()"/>
			<input type="button" value="cancel" onclick="parent.$.colorbox.close();" />
		</div>

		<div id="demo-source">
			<div>
				<a><img alt="closed" style="height: 12px;" src="../img/closed.png"/>java script</a>
				<div class="codeblock">
					<pre name="javascriptcode" class="js:nocontrols">
			//initial data
			$(function() {
				var id = $d.url.para('id');
				//for editing
				if(id != '') {
					//query the data
					$.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$callback=callback&$filter=Id eq '" + id + "'", {}, {
						dataType : "jsonp",
						callback : function(data) {
							var d = data.d.results[0];
							//format the datetime
							d.DateModified = $d.datetime.format(d.DateModified, "MM-dd-yyyy");
							//set data to the page
							$("#divDetail").setObject(d);
						}
					});
				} 
			});
			
			//submit the change
			function submitchange() {
				var model = $("#divDetail").pushObject();
				//change the datetime value to the normal format
				model.DateModified = $d.datetime.format(model.DateModified, null, "MM-dd-yyyy");
				var id = $d.url.para('id');
				//inert
				if(id == '')
					parent.insert(model);
				//update
				else
					parent.update(model);
				//close the popup window
				parent.$.colorbox.close();
			}
			</pre>
				</div>
			</div>
			<div>
				<a><img style="height: 12px;" src="../img/closed.png"/>HTML</a>
				<div class="codeblock">
					<pre name="htmlcode" class="html:nocontrols">
		&lt;div id=&quot;divDetail&quot;&gt;
			&lt;input type=&quot;hidden&quot; value=&quot;&quot; name=&quot;Id&quot;/&gt;
			&lt;table&gt;
				&lt;tr&gt;
					&lt;td&gt; Image Url: &lt;/td&gt;
					&lt;td&gt;
					&lt;input type=&quot;text&quot; name=&quot;__metadata.media_src&quot; /&gt;
					&lt;/td&gt;
				&lt;/tr&gt;

				&lt;tr&gt;
					&lt;td&gt; Name: &lt;/td&gt;
					&lt;td&gt;
					&lt;input type=&quot;text&quot; name=&quot;Name&quot; /&gt;
					&lt;/td&gt;
				&lt;/tr&gt;

				&lt;tr&gt;
					&lt;td&gt; Rating: &lt;/td&gt;
					&lt;td&gt;
					&lt;input type=&quot;text&quot; name=&quot;AverageRating&quot; /&gt;
					&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt; Dvd: &lt;/td&gt;
					&lt;td&gt;
					&lt;input type=&quot;checkbox&quot; name=&quot;Dvd.Available&quot; /&gt;
					&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt; Modified: &lt;/td&gt;
					&lt;td&gt;
					&lt;input type=&quot;text&quot; id=&quot;birthday&quot; name=&quot;DateModified&quot; /&gt;
					&lt;/td&gt;
				&lt;/tr&gt;

			&lt;/table&gt;
		&lt;/div&gt;
			</pre>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				dp.SyntaxHighlighter.HighlightAll('javascriptcode');
				dp.SyntaxHighlighter.HighlightAll('htmlcode');

				$("#demo-source a").click(function() {
					$(this).next().toggle('slow');
					var img = $(this).find('img');
					var open = false;
					if(img.attr("alt") != "open") {
						open = true;
						img.attr("alt", "open")
					} else {
						open = false;
						img.attr("alt", "closed")
					}

					$(this).find('img').rotate({
						angle : open ? 0 : 90,
						animateTo : open ? 90 : 0
					});
				}).next().hide();

				$("input[type='button']").button();

				$("#birthday").datepicker({
					dateFormat : "mm-dd-yy"
				});

				var id = $d.url.para('id');

				if(id != '') {
					$.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$callback=callback&$filter=Id eq '" + id + "'", {}, {
						dataType : "jsonp",
						callback : function(data) {
							var d = data.d.results[0];
							d.DateModified = $d.datetime.format(d.DateModified, "MM-dd-yyyy");
							$("#divDetail").setObject(d);
							$("input[type='checkbox']").iButton({
								labelOn : "Yes",
								labelOff : "No"
							});
						}
					});
				} else {
					$("input[type='checkbox']").iButton({
						labelOn : "Yes",
						labelOff : "No"
					});
				}
			});

			function submitchange() {
				var model = $("#divDetail").pushObject();

				model.DateModified = $d.datetime.format(model.DateModified, null, "MM-dd-yyyy");

				var id = $d.url.para('id');

				if(id == '')
					parent.insert(model);
				else
					parent.update(model);

				parent.$.colorbox.close();
			}
		</script>

	</body>
</html>
